<template>
  <el-main class="recordContainer" v-loading="isLoading">
    <el-row>
      <el-col style="text-align: left">
        <el-select v-model="nowYear" @change="changeYear" style=" margin: 0 8%;">
          <el-option
            v-for="(year,index) in years"
            :key="index"
            :label="year.year"
            :value="year.year"
          ></el-option>
        </el-select>
      </el-col>
    </el-row>
    <el-row>
      <el-col :offset="2" :span="20">
        <div style="min-height: 510px">
          <el-card v-for="(item,index) in this.data" class="recordCard" :key="index">
            <p class="returnBack" :style="Yellowbackground" v-if="item.review == 0"></p>
            <p class="returnBack" :style="Redbackground" v-if="item.review == 1"></p>
            <p class="returnBack" :style="Greenbackground" v-if="item.review == 2"></p>
            <p style="padding: 0 1vh;font-size: 20px;margin-bottom: 3vh;">{{item.name}}</p>
            <p
              style="padding: 1vh 2vh;margin: 1vh 0;font-size: 16px;border-bottom: #e7e7e8 1px solid"
            >版本号：{{item.version}}</p>
            <div style="float: right;">
              <el-button v-if="item.review==2" class="recordBtn" size="small">
                <a @click="showHtml">查看打印稿</a>
              </el-button>
              <!-- <el-button v-if="item.review==2"
                         class="recordBtn"
                         size="small">
                <a @click="downPdf">下载文件</a>
              </el-button>-->
              <el-button class="recordBtn" v-if="item.review === 1" size="small">
                <router-link :to="{path:'/mender/commitDutyData', query: {id: item.id}}">修改</router-link>
              </el-button>
            </div>
          </el-card>
          <div style="margin-top:5vh;font-size:1.5rem;" v-if="this.data.length == 0">暂无数据</div>
        </div>
        <!-- :total="totalItem" -->
        <el-pagination
          layout="prev,pager,next"
          :page-size="pageCount"
          @current-change="getRecordsData"
          style="float:right; top: 90%"
        ></el-pagination>
      </el-col>
    </el-row>
  </el-main>
</template>

<script>
export default {
  name: "commitRecords",

  components: {},

  data() {
    return {
      responsibility: 1,

      isLoading: true,
      //总数据数量
      totalItem: 10,
      //当前页数
      nowPage: 1,
      //每页的项目数量
      pageCount: 6,
      //当前年
      nowYear: 2019,
      //年份选择
      years: [],
      //当前页的3条数据
      data: [],
      page: 1,
      Greenbackground: {
        backgroundImage: "url(" + require("../../static/image/green.png") + ")"
      },
      Redbackground: {
        backgroundImage: "url(" + require("../../static/image/red.png") + ")"
      },
      Yellowbackground: {
        backgroundImage: "url(" + require("../../static/image/yellow.png") + ")"
      }
    };
  },

  methods: {
    //先显示打印稿
    downPdf() {
      let _this = this;
      _this.message(true, "这可能需要十秒钟，请稍等", "danger");
      _this
        .$http({
          method: "get",
          url: "/api/mender/htmlToPdf",
          params: {
            fileName: _this.data[0].name
          }
        })
        .then(function(response) {
          //返回0则表示成功
          if (response.data.code == 0) {
            setTimeout(function() {
              window.open("/api/mender/downPdf?fileName=" + _this.data[0].name);
            }, 10000);
            // _this.smallPdf();
          } else {
            _this.$message.error(response.data.message);
          }
        })
        .catch(error => console.log(error));
    },

    //显示新的html打印稿
    showHtml() {
      let _this = this;
      _this.message(true, "这可能需要十秒钟，请稍等", "danger");
      _this
        .$http({
          method: "get",
          url: "/api/mender/toNewHtml",
          params: {}
        })
        .then(function(response) {
          //返回0则表示成功
          if (response.data.code == 0) {
            setTimeout(function() {
              console.log("该打开页面了");
              window.open(
                "/api/mender/showHtml?fileName=" + response.data.data,
                "_blank",
                "scrollbars=yes,resizable=1,modal=false,alwaysRaised=yes"
              );
            }, 10000);
          } else {
            _this.message(true, response.data.message, "danger");
          }
        })
        .catch(error => console.log(error));
    },

    /**
     * 获取某一页的数据
     * @param page 页码
     */
    getRecordsData(page) {
      //   console.log("year");
      //   console.log(this.nowYear.year);

      let $this = this;
      this.$http({
        method: "get",
        url: "/api/mender/getRecordByIdAndYearAndPageMender",
        params: {
          page: page,
          limit: this.pageCount,
          year: this.nowYear
          //   responsibility: this.responsibility
        }
      })
        .then(function(response) {
          //返回0则表示成功
          if (response.data.code == 0) {
            // $this.message(true, response.data.message, 'success');
            //把获取到的结果赋值给当前
            $this.data = response.data.data.result;
            setTimeout(() => {
              $this.isLoading = false;
            }, 500);
          } else {
            alert("无法获取任何信息");
            $this.message(true, response.data.message, "danger");
          }
        })
        .catch(error => console.log(error));
      this.getTotalNumber();
    },

    /**
     * 获取年份选项
     * 这个方法是否需要传递过去用户ID
     */
    getYearData() {
      let $this = this;
      this.$http({
        method: "get",
        url: "/api/mender/getRecordYear",
        params: {}
      })
        .then(function(response) {
          //返回0则表示成功
          if (response.data.code === 0) {
            //把获取到的结果赋值给当前
            $this.years = response.data.data;
          } else {
            $this.message(true, response.data.msg, "danger");
          }
        })
        .catch(error => console.log(error));
    },

    /**
     * 更改年份重新获取数据
     */
    changeYear() {
      this.nowPage = 1;
      this.isLoading = true;
      this.getRecordsData(this.nowPage);
    },

    /**
     * 分页
     * 获取某一年的所有数据总数，用于显示页码
     * @param year
     */
    getTotalNumber(year) {
      // let $this = this;
      // console.log(this.nowYear)
      console.log("year");
      this.$http({
        method: "get",
        url: "/api/mender/getRecordByYearAndPage",
        params: {
          page: 1,
          limit: this.pageCount,
          year: 2019
        }
      })
        .then(function(response) {
          //返回0则表示成功
          if (response.data.code === 0) {
            // $this.message(true, response.data.msg, 'success');
            //把获取到的结果赋值给当前
            $this.totalItem = response.data.data;
          } else {
            $this.message(true, response.data.msg, "danger");
          }
        })
        .catch(error => console.log(error));
    },

    /**
     * 跳转到修改页面
     * @param id 记录ID
     */
    goToModifyPage(id) {},

    /**
     * 跳转到打印稿页面
     * @param id 记录ID
     */
    getPrintPage(id) {}
  },
  mounted() {
    this.getYearData();
    this.nowYear = new Date().getFullYear() + "";
    this.getRecordsData(1);
  }
};
</script>

<style scoped>
.recordContainer {
  background-color: white;
  width: 80%;
  margin: 2% 10%;
  text-align: left;
}

.recordCard {
  margin: 2vh 0;
  padding: 0vh 2vh 1vh 2vh;
  background-color: #f6f7fc;
  color: rgb(95, 95, 95);
  position: relative;
}

.recordBtn {
  background-color: transparent;
  font-weight: 300;
}

.returnBack {
  display: inline-block;
  right: 0;
  top: 0;
  width: 64px;
  height: 64px;

  position: absolute;
}

.returnBackP {
  position: absolute;
  right: 0;
  top: 0;
  color: #f10505;
  font-size: 2.1vh;
  transform: rotate(45deg) translate(1vh, 1vh);
}
</style>